<template>
	<view class="menu-scroll-box" :class="[border_ ? 'ss-underline' : '']">
		<scroll-view
			class="menu-scroll"
			:scroll-x="false"
			:scroll-y="scrollY"
			scroll-with-animation
			:scroll-into-view="currentView_"
		>
			<view class="menu-scroll-list">
				<view
					class="menu-scroll-item"
					:id="'type' + index"
					v-for="(item, index) in list"
					:key="index"
					:class="[menuVal == item.value ? 'menu-scroll-item__active' : '']"
					@tap="changeType(item, index, $event)"
				>
					<text class="menu-scroll-item__text">{{ item[label] }}</text>
					<block v-if="mode !== 'home'">
						<text class="menu-scroll-item__line"></text>
					</block>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts">
import { computed, ref, defineComponent, PropType, reactive, watch } from "vue";

type list = {
	[key: string]: any;
}[];

export default defineComponent({
	props: {
		list: {
			type: Array as PropType<list>,
			default: () => {
				return [];
			},
		},
		border: {
			type: [String, Boolean],
			default: false,
		},
		modelValue: {
			type: String,
			default: "",
		},
		scrollY: {
			type: [String, Boolean],
			default: true,
		},
		label: {
			type: String,
			default: "label",
		},
		mode: {
			type: String,
			default: "normal",
		},
	},

	emits: ["update:modelValue", "change"],

	setup(props, { emit }) {
		const menuVal = ref<any>();

		watch(
			() => props.modelValue,
			(val: any) => {
				menuVal.value = val;
			},
			{
				immediate: true,
			}
		);

		const border_ = computed(() => {
			return String(props.border) === "false" ? false : true;
		});

		const currentView_ = computed(() => {
			const _index = props.list?.findIndex((e) => e.value == menuVal.value) ?? -1;

			let typeIndex = _index - 2;
			typeIndex = typeIndex < 0 ? 0 : typeIndex;
			return "type" + typeIndex;
		});

		function changeType(item: any, index: any, e = {}) {
			if (menuVal.value === item.value) return;

			menuVal.value = item.value;

			emit("update:modelValue", item.value);

			emit("change", {
				...item,
				menuIndex: index,
			});
		}

		return {
			menuVal,
			border_,
			currentView_,

			changeType
		};
	},
});
</script>

<style lang="scss" scoped>
.menu-scroll {
	flex: 1;
	width: 100%;
	height: 100%;

	&::-webkit-scrollbar {
		display: none;
	}

	&-box {
		width: 200rpx;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}

	&-list {
		width: 100%;
	}

	&-item {
		text-align: center;
		position: relative;
		@include ellipsis();
		display: block;
		padding: 26rpx 0;

		&__active {
			background: #fff;
			.menu-scroll-item__text {
				// color: #fff;
				// border-radius: 25px;
				font-weight: 600;
			}
		}

		&__icon {
			@include abs(null, 50%, 0);
			z-index: 3;
			transform: translateX(50%);
		}

		&__text {
			display: block;
			color: inherit;
			line-height: 1.3;
			// height: 60rpx;
			font-size: 26rpx;
			padding: 0 12rpx;
			position: relative;
			// @include ellipsis();
		}
	}
}
</style>
